import React,{PureComponent} from 'react';
import {HeaderWrapper,Logo,Nav,NavItem,NavSearch,
    AddTion,Button,SearchWrapper,SearchInfo,SearchTitle,
    SearchInfoSwitch,SearchInfoItem,SearchInfoList} from './style'
import { CSSTransition } from 'react-transition-group';
import { actionCreators } from './store';
import { actionCreators as loginActionCreators } from '../../pages/login/store';
import {connect} from "react-redux";
//import Test from './store/test';
import {Link} from 'react-router-dom';

class Header extends PureComponent{
    //写方法。将props.fouced标识符传递进去。如果为真，就显示。否则，隐藏
    getListAera=()=>{
        const {focused,list,page,totalPage,handleChangePage,handleMouseEnter,handleMouseLeave,mouseIn}=this.props;
        const newList=list.toJS();  //immutable方法  toJS  将immutable对象转换为普通对象
        const pageList=[];
        if(newList.length){
            for (var i=(page-1)*10;i<page*10;i++){
                pageList.push(<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>)
            }
        }
         if(focused || mouseIn ){
             return <SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                 <SearchTitle>
                     热门搜索
                     <SearchInfoSwitch onClick={()=>handleChangePage(page,totalPage,this.spinIcon)}>
                         <i ref={(icon)=>{this.spinIcon=icon}} className='iconfont spin'>&#xe851;</i>
                         换一批
                     </SearchInfoSwitch>
                 </SearchTitle>
                 <SearchInfoList>
                     {pageList}
                 </SearchInfoList>
             </SearchInfo>
         }else{
             return null;
         }
     }

    render() {
        const {focused,handleInputFocus,handleInputBlur,list,login,logout}=this.props;

        return   <HeaderWrapper>
            {/*<Logo href='/'></Logo> 点击跳转主页 另一种写法*/}
            <Link to={'/'}>
            <Logo></Logo>
            </Link>
            <Nav>
                <NavItem className='left active'>首页</NavItem>
                <NavItem className='left'>下载App</NavItem>
                {login? <NavItem onClick={logout} className='right'>退出</NavItem> :<Link to={'/login'}><NavItem className='right'>登录</NavItem></Link>}
                <NavItem className='right'>
                    <i className='iconfont'>&#xe636;</i>
                </NavItem>
                <SearchWrapper>
                    <CSSTransition in={focused} timeout={400} classNames='slide'>
                        <NavSearch className={focused?'focused':''}
                                   onFocus={()=>handleInputFocus(list)} onBlur={handleInputBlur}
                        ></NavSearch>
                    </CSSTransition>
                    <i className={focused?'focused iconfont zoom':'iconfont zoom'}>&#xe62d;</i>
                    {this.getListAera()}
                </SearchWrapper>
            </Nav>
            <AddTion>
                <Link to='/write'>
                <Button className='writting'>
                    <i className='iconfont'>&#xe615;</i>
                    写文章
                </Button>
                </Link>
                <Button className='reg'>注册</Button>
            </AddTion>
        </HeaderWrapper>
    }

}



 const mapStateToProps=(state)=>{
    return {
        //最开始reducer没有被拆分时，focused在最顶层。但现在拆分过后。focused在header下。所以代码如下：
        // focused:state.header.get('focused')
        // focused:state.get('header').get('focused')等价于
            focused:state.getIn(['header','focused']),
            list:state.getIn(['header','list']),
            page:state.getIn(['header','page']),
            totalPage:state.getIn(['header','totalPage']),
            mouseIn:state.getIn(['header','mouseIn']),
            login:state.getIn(['login','login'])
    }
}
const mapDispatchToProps=(dispatch)=>{
    return {
        handleInputFocus(list){
            //对象.方法()
            // console.log(list)---解决ajax无意义请求数据
            (list.size===0)&& dispatch(actionCreators.getList());
            // if(list.size===0){   另一种写法
            //     dispatch(actionCreators.getList());
            // }
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur(){
            dispatch(actionCreators.searchBlur());
        },
        handleMouseEnter(){
            dispatch(actionCreators.mouseEnter());
        },
        handleMouseLeave(){
            dispatch(actionCreators.mouseLeave());
        },
        handleChangePage(page,totalPage,spin){
          //测试代码
          // console.log('test11111',Test.Test)
          // console.log('test222',Test.B)
          // console.log('test333',Test.C)

        let originAngle =spin.style.transform.replace(/[^0-9]/ig,'')
            if(originAngle){
                originAngle=parseInt(originAngle,10)
            }else{
                originAngle=0
            }
           spin.style.transform='rotate('+(originAngle+360)+'deg)'
            if(page<totalPage){
                dispatch(actionCreators.changePage(page+1));
            }else{
                dispatch(actionCreators.changePage(1));
            }

        },
        logout(){
            dispatch(loginActionCreators.logout())
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Header);

//搜索框动画实现：定义一个标识符控制  三元表达式判断  运用获取焦点和失去焦点的函数  CSSTransition 的进场和出场动画
//使用react-redux。传递的两个参数，先用const定义---return
//import * as actionCreators from './store/actionCreators'; 知识点 es6 模块整体加载
// 使用 * 指定一个对象；  as后面跟对象的名称；  所有输出的值都加载到这个对象上；